<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>欢迎页</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/css/font-awesome.min.css">
    <script type="text/javascript" src="${request.contextPath}/statics/libs/jquery.min.js"></script>
    <script type="text/javascript" src="${request.contextPath}/statics/plugins/layui/layui.js"></script>
    <script type="text/javascript" src="${request.contextPath}/statics/libs/vue.min.js"></script>
    <script type="text/javascript" src="${request.contextPath}/statics/js/echarts.js"></script>
    <script type="text/javascript" src="${request.contextPath}/statics/js/echarts.js"></script>
    <script type="text/javascript" src="${request.contextPath}/statics/js/index.js"></script>
    <style>
        .clear{ clear: both}
        .fbaner .sheader .headli:hover{background: #f60}
        .fbaner .sheader .headli.active{background: #f60}
        .fbaner table{ width: 100%; }
        .fbaner table td{ width: 20%; padding: 10px ;}
        .fbaner table td .kse{ width: 100%; height:90px; overflow: hidden; color: #ffffff}
        .kse0{background: #66cc66;animation:kse0 2s;}
        .kse1{background: #66cc99;animation:kse1 3s;}
        .kse2{background: #66cccc;animation:kse2 4s;}
        .kse3{background: #66ccff;animation:kse3 5s;}
        .kse4{background: #6699ff;animation:kse4 6s;}
        .fbaner   .kse .kseleft{ float: left;color: #ffffff;text-indent: 15px; }
        .fbaner   .kse .kseleft .knum{font-size:36px; line-height:50px; padding-top: 10px}
        .fbaner   .kse .kseleft .ksefoot{text-align: left; font-size: 12px;
            line-height:30px; font-weight: 600; color: #ffffff;}
        .fbaner   .kse .kseright{ float: right; font-size: 60px;   margin-right: 20px;}
        @keyframes kse1
        {
            from {background:#fff;}
            to {background:#66cc99;}
        }
        @keyframes kse2
        {
            from {background:#fff;}
            to {background:#66cccc;}
        }
        @keyframes kse3
        {
            from {background:#fff;}
            to {background:#66ccff;}
        }
    </style>
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">基本信息</div>
    <div style="padding: 10px 0 20px 10px;" >
        <!------>
        <div  class="fbaner">

            <table class="stj">
                <tr>
                    <td>
                        <div class="kse kse1">
                            <div class="kseleft"  >
                                <div class="knum">
                                    <span   class="timer" id="count-number" data-to="198" data-speed="2000">198</span>
                                </div>
                                <div class="ksefoot">当品信息统计</div>
                            </div>
                            <div class="kseright"><i class="fa fa-diamond"></i></div>
                            <div class="clear"></div>
                        </div>
                    </td>
                    <td>
                        <div class="kse kse2">
                            <div class="kseleft"  >
                                <div class="knum">
                                    <span   class="timer" id="count-number" data-to="2765" data-speed="2000">9989</span>
                                </div>
                                <div class="ksefoot"  >从业人员信息统计</div>
                            </div>
                            <div class="kseright"><i class="fa fa-address-card-o"></i></div>
                            <div class="clear"></div>
                        </div>
                    </td>
                    <td><div class="kse kse3">
                        <div class="kseleft"  >
                            <div class="knum">
                                <span   class="timer" id="count-number" data-to="888" data-speed="2000">888</span>
                            </div>
                            <div class="ksefoot" >核查人员信息统计</div>
                        </div>
                        <div class="kseright"><i class="fa fa-users"></i></div>
                        <div class="clear"></div>
                    </div></td>

                </tr>
            </table>
        </div>


        <!----->
    </div>
    <!--<div class="panel-heading">统计图表</div>-->
    <!--<div style="padding: 20px;">-->
        <!--<div id="main" style="width: 100%;height:400px;"></div>-->
    <!--</div>-->
</div>
<script>

        $.ajax({
            type: "POST",
            url: "/qyxxddddyw/list",
            contentType: "application/json",
            data: JSON.stringify(vm.qyxxDd),
            success: function(r){
                $(".kse1 span").html(r.page.totalCount)
            }
        });
        $.ajax({
            type: "POST",
            url: "/qyxxddcyryxx/list",
            contentType: "application/json",
            data: JSON.stringify(vm.qyxxDd),
            success: function(r){
                $(".kse2 span").html(r.page.totalCount)
            }
        });
        $.ajax({
            type: "POST",
            url: "/qyxxddryhc/list",
            contentType: "application/json",
            data: JSON.stringify(vm.qyxxDd),
            success: function(r){
                $(".kse3 span").html(r.page.totalCount)
            }
        });


    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        title : {
            text: '警察学院男女统计',
            subtext: '测试echarts'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['girls','boys']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'girls',
                type:'bar',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'boys',
                type:'bar',
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                markPoint : {
                    data : [
                        {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                        {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>